import { Preset, defineConfig, presetUno } from "unocss";

const customPreset: Preset = {
  name: "my-preset",
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^p-([.\d]+)$/, ([_, num]) => ({ padding: `${num}px` })],
  ],
  variants: [
    /* ... */
  ],
  shortcuts: [
    /* ... */
  ],
  // ...
};

export default defineConfig({
  // rules
  rules: [
    [/^m-([.\d]+)$/, ([_, num]) => ({ margin: `${num}px` })],
    [/^text-(.*)$/, ([, c], { theme }) => {
      if (theme.colors[c])
        return { color: theme.colors[c] }
    }],
    [/^aaa-(.*)$/, ([, c], { theme }) => {
      if (theme.bbb[c])
        return { color: theme.bbb[c] }
    }],
  ],

  // theme
  theme: {
    // ...
    colors: {
      'veryCool': '#0000ff', // class="text-very-cool"
      'brand': {
        'primary': 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
      },
    },
    backgroundColor: {
      'ccc': '#f0f'
    },
    breakpoints: {
      sm: '320px',
      md: '640px',
    },
  },

  // variants
  variants: [
    {
      name: 'variant-name',
      match(matcher, { theme }) {
      },
    },
  ],

  // shortcuts
  shortcuts: [
    [/^badge-(.*)$/, ([, c], { theme }) => {
      if (Object.keys(theme.colors).includes(c))
        return `bg-${c}4:10 text-${c}5 rounded`
    }],
  ],

  // presets
  presets: [presetUno(),customPreset],

  // transformers
  transformers: []
});
